<template>
	<view class="group-upload">
		<view class="group-banner">
			<view v-if="poster" class="group-banner__poster">
				<view class="group-banner__delete" @tap="handleDeletePoster">×</view>
				<image class="group-banner__image" :src="host + poster" mode="aspectFill"></image>
			</view>
			<view v-else class="group-banner__upload" @tap="handleUploadPoster">
				<text class="group-banner__icon iconfontPT icontupian02"></text>
				<text class="group-banner__text">上传封面</text>
			</view>
		</view>
		<view class="group-photos">
			<view class="group-photos__item" v-for="item in photos" :key="item">
				<view class="group-photos__delete" @tap="handleDeletePhoto(index)">×</view>
				<image class="group-photos__image" :src="host + item" mode="aspectFill"></image>
			</view>
			<view class="group-photos__item" @tap="handleUploadList" v-if="photos.length < 2">
				<text class="group-photos__icon iconfontPT icontupian02"></text>
				<text class="group-photos__text">上传图片</text>
			</view>
		</view>
		<view class="group-footer">
			<button class="group-footer__button" type="warn" @tap="handleSubmit">完 成</button>
		</view>
	</view>
</template>

<script>
	import Upload from '@/utils/upload.js'
	
	const { uploadImage } = new Upload({ checkType:'zj' })
	
	export default {
		data() {
			return {
				poster:'',
				photos:[]
			}
		},
		computed:{
			host(){
				return this.$baseHost.car
			}
		},
		methods:{
			async handleUploadPoster(){
				try{
					const {data} = await uploadImage()
					this.poster = data[0].url
				}catch(e){
					console.warn(e.message)
				}
			},
			async handleUploadList(){
				try{
					const {data} = await uploadImage()
					this.photos = [...this.photos,data[0].url]
				}catch(e){
					console.warn(e.message)
				}
			},
			handleDeletePoster(){
				this.poster = ''
			},
			handleDeletePhoto(index){
				this.photos = this.photos.filter((item,i)=> index !== i)
			},
			handleSubmit(){
				// 暂存已上传图片，返回显示
				uni.setStorageSync('group-upload-data', {poster:this.poster,photos:this.photos})
				uni.navigateBack()
			}
		},
		onLoad(){
			const data = uni.getStorageSync('group-upload-data')
			if(data){
				this.poster = data.poster
				this.photos = data.photos
			}
		}
	}
</script>

<style lang="scss">
.group-upload{
	height: 100vh;
	padding: 0 30rpx;
	display: flex;
	flex-direction: column;
}
.group-banner{
	width: 100%;
	height: 380rpx;
	position: relative;
	&__poster{
		width: 100%;
		height: 100%;
	}
	&__image{
		width: 100%;
		height: 100%;
	}
	&__upload{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background-color: #f8f8f8;
		color: #9A9A9A;
	}
	&__delete{
		position: absolute;
		top: 0;
		right: 5rpx;
		font-size: 40rpx;
		line-height: 1em;
		width: 50rpx;
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		text-shadow: 1rpx 1rpx #CCCCCC;
	}
}
.group-photos{
	display: flex;
	flex-wrap: wrap;
	&__item{
		width: 340rpx;
		height: 190rpx;
		margin-top: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background-color: #f8f8f8;
		color: #9A9A9A;
		position: relative;
		&:nth-child(even){
			margin-left: 10rpx;
		}
	}
	&__image{
		width: 100%;
		height: 100%;
	}
	&__delete{
		position: absolute;
		top: 0;
		right: 5rpx;
		font-size: 40rpx;
		line-height: 1em;
		width: 50rpx;
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		text-shadow: 1rpx 1rpx #CCCCCC;
	}
}
.group-footer{
	margin-top: auto;
	padding: 80rpx 0;
}
</style>
